<template>
  <custom-dialog
    v-loading="loading"
    :title="title"
    :visible.sync="innerVisible"
    :fullscreen="true"
    append-to-body
  >
    <iframe v-if="isIframe" :src="src" class="dialog-iframe" />
    <custom-entity v-else ref="entity" />
    <iframe v-if="loginUrl !== null && loginUrl !== ''" class="custom-iframe" :src="loginUrl" />
  </custom-dialog>
</template>

<script>
import CustomDialog from '../common/CustomDialog';
import CustomEntity from './solt/content';
import { openCasUrl } from '@/api/portal/user/cas';
export default {
  name: 'MobileEntity',
  components: { CustomDialog, CustomEntity },
  data() {
    return {
      loading: false,
      innerVisible: false,
      title: '',
      src: '',
      loginUrl: null,
      isIframe: true
    };
  },
  methods: {
    init(params) {
      this.innerVisible = true;
      this.title = params.title;
      this.loading = true;
      if (params.openType === 1 || params.openType === 2) {
        /* let domain = params.url.replace('https://', '').replace('http://', '')
        domain = domain.substring(0, domain.indexOf('/')) */
        openCasUrl({ url: params.url, type: 'app' }).then(res => {
          const { data } = res;
          this.loginUrl = data.url;
          setTimeout(() => {
            this.isIframe = true;
            this.src = params.url;
            this.loading = false;
          }, 1000);
        }).catch(() => {
          this.loading = false;
        });
      } else {
        this.isIframe = false;
        this.$nextTick(() => {
          this.$refs.entity.init(params);
        });
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.dialog-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  border: 0;
}
.custom-iframe {
  width: 100%;
  height: 0px;
  overflow: hidden;
}
</style>
